<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>创建员工与审批员</span>
      </div>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="account">
          <el-input v-model="ruleForm.account" placeholder="请输入用户名" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"  autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="password2">
          <el-input type="password" v-model="ruleForm.password2"  placeholder="请输入密码" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="权限分配" prop ="type">
          <el-radio-group v-model="ruleForm.role_id" size="medium">
            <el-radio border label="2" >员工</el-radio>
            <el-radio border label="3" >审批管理员</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="审批权限分配" v-show="ruleForm.role_id==3">
          <el-checkbox-group v-model="ruleForm.permission">
            <el-checkbox-button label="one" name="type">一审</el-checkbox-button>
            <el-checkbox-button label="two" name="type">二审</el-checkbox-button>
            <el-checkbox-button label="end" name="type">终审</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {permissionCreateUser} from '@/api/http'

export default {
  data(){
    //校验密码
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      ruleForm:{
        account:'', //用户名
        password:'',
        password2:'', //确认密码
        role_id:'2',
        permission:[],//组
      },
      rules: {
          account: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
          ],
          password2: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          role_id: [
            { required: true, message: '请选择权限', trigger: 'change' }
          ],
        }
    }
  },
  methods:{
    submitForm(formName){  //提交数据
      this.$refs[formName].validate((valid) => {
          let {role_id,account,password,permission} = this.ruleForm;
          let temp = {
            account,
            password,
            role_id,
            permission:permission.join(",") //将数组转为字符串
          };
          if (valid) {
           permissionCreateUser(temp).then(res=>{
              let {code} = res.data;
              if(code==20000){
                this.$notify({
                  title: '创建员工&审批员',
                  message: '创建成功',
                  duration: 2000,
                  type: 'success'
                });
                this.$router.push("/powerManage/userLists") //跳转
              }
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    }
  }
}
</script>


